import React, { useState, useEffect } from 'react';
import { Card, Spin, Alert, Button, Row, Col, Typography } from 'antd';
import { PortfolioAPI } from '../../api/portfolio';
import './PortfolioDecision.scss';

const { Title, Text } = Typography

const PortfolioDecision = () => {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)
  const [portfolio, setPortfolio] = useState(null)

  const fetchRecommendation = async () => {
    console.log("re")
    setLoading(true)
    setError(null)
    try {
      const response = await PortfolioAPI.getRecommendation()
      console.log(response)
      setPortfolio(response.data)
    } catch (err) {
      setError(err.response?.data?.message || '获取推荐失败')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    fetchRecommendation()
  }, [])

  const handleRefresh = () => {
    fetchRecommendation()
  }

  return (
  <div className="portfolio-decision-container" style={{ padding: '0 16px' }}>
    <Card
      title={
      <span style={{ fontSize: 18 }}>投资组合推荐</span>
      }
      extra={
        <Button 
          type="primary" 
          onClick={handleRefresh}
          loading={loading}
          style={{ borderRadius: 4 }}
        >
          刷新推荐
        </Button>
      }
      headStyle={{ borderBottom: 0 }}
      style={{ borderRadius: 12, boxShadow: '0 4px 12px rgba(0,0,0,0.05)' }}
    >
      {error && (
        <Alert
          message="错误提示"
          description={error}
          type="error"
          closable
          style={{ marginBottom: 24, borderRadius: 8 }}
        />
      )}

      <Spin
        spinning={loading}
        tip="正在生成推荐..."
      >
        {portfolio && (
          <div className="portfolio-content">
            <Title
              level={4}
              style={{
                textAlign: 'center',
                marginBottom: 24,
                color: '#1890ff',
              }}
            >
              根据您的风险偏好生成
            </Title>
            
            {portfolio.risk_based_portfolio.map((group, index) => {
              // 根据风险等级设置不同主题
              const theme = group.risk_level.includes('高') ? {
                color: '#f5222d',
                bg: '#fff1f0',
              } : group.risk_level.includes('低') ? {
                color: '#52c41a',
                bg: '#f6ffed',
              } : {
                color: '#1890ff',
                bg: '#e6f7ff',
              };

              return (
                <Card
                  key={index}
                  title={
                    <span style={{ color: theme.color }}>
                      {group.risk_level}
                    </span>
                  }
                  style={{ 
                    marginBottom: 24,
                    borderRadius: 10,
                    borderLeft: `4px solid ${theme.color}`,
                    backgroundColor: theme.bg,
                    boxShadow: '0 2px 8px rgba(0,0,0,0.05)'
                  }}
                  headStyle={{
                    borderBottom: 0,
                    fontWeight: 500,
                    fontSize: 16
                  }}
                  bodyStyle={{ padding: '16px 20px' }}
                >
                  {group.portfolio.map((item, idx) => (
                    <div 
                      key={idx} 
                      style={{
                        padding: 16,
                        marginBottom: 12,
                        backgroundColor: '#fff',
                        borderRadius: 8,
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 16
                      }}
                    >
                      <div style={{ flex: 1, minWidth: 120 }}>
                        <div style={{ color: '#888', fontSize: 12 }}>股票代码</div>
                        <div style={{ fontSize: 16, fontWeight: 500 }}>
                          {item.stock}
                        </div>
                      </div>
                      <div style={{ flex: 1, minWidth: 120 }}>
                        <div style={{ color: '#888', fontSize: 12 }}>权重</div>
                        <div style={{ fontSize: 16, fontWeight: 500 }}>
                          {item.allocation}
                        </div>
                      </div>
                      <div style={{ flex: 1, minWidth: 120 }}>
                        <div style={{ color: '#888', fontSize: 12 }}>预期收益</div>
                        <div style={{ fontSize: 16, fontWeight: 500 }}>
                          {item.expected_return}
                        </div>
                      </div>
                      <div style={{ flex: 1, minWidth: 120 }}>
                        <div style={{ color: '#888', fontSize: 12 }}>风险</div>
                        <div style={{ fontSize: 16, fontWeight: 500 }}>
                          {item.risk}
                        </div>
                      </div>
                    </div>
                  ))}
                </Card>
              );
            })}

            <div 
              className="action-buttons" 
              style={{ 
                marginTop: 24,
                display: 'flex',
                justifyContent: 'center',
                gap: 16
              }}
            >
            </div>
          </div>
        )}
      </Spin>
    </Card>
  </div>
);
}

export default PortfolioDecision;